<template>
  <div v-loading="loading" class="lockscreen">
    <div class="login-box">
      <div class="username">{{ userName }}</div>
      <el-input
        v-model="password"
        type="password"
        autofocus
        placeholder="请输入登录密码"
      >
        <el-button
          slot="append"
          type="primary"
          icon="el-icon-arrow-right"
          :class="{ disabled: !password.length }"
          :disable="!password.length"
          @click="login"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("user");
export default {
  name: "LockScreen",
  data() {
    return {
      password: "", // 密码
      loading: false,
    };
  },
  computed: {
    ...mapState(["realName", "userName"]),
  },
  methods: {
    ...mapActions(["Login"]),
    // 登陆
    login() {
      if (!this.password) return;
      this.loading = true;
      this.Login({
        username: this.userName,
        password: this.password,
      })
        .then(() => {})
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.lockscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  overflow: hidden;
  color: #fff;
  background: #000;
  background-color: #191c22c7;
  backdrop-filter: blur(7px);

  .login-box {
    position: absolute;
    top: 45%;
    left: 50%;
    display: flex;
    transform: translate(-50%, -50%);
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .username {
      margin-bottom: 20px;
      font-size: 22px;
    }
    .el-input {
      width: 250px;
    }
  }
  ::v-deep {
    .el-input__inner {
      border-right-color: transparent;
    }
    .el-input-group__append button.el-button {
      background-color: var(--theme);
      border-color: var(--theme);
      &.disabled {
        cursor: not-allowed;
        opacity: 0.6;
      }
    }
    .el-icon-arrow-right {
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>
